import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button,
  TextInput,
  Image,
  TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import ChatScreen from './ChatScreen'

class HomeScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      nowtext:""
    }
  }
  static navigationOptions = {
    title: 'Form1',
  };
  _onPressButton() {
    alert("按钮被单击");
  }
  render() {
    const { navigate } = this.props.navigation;
    const {nowtext} = this.state;
    return (
      <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
        <Text style={{fontSize:25}}>Hello, Test App!</Text>
        <TextInput style={{height:50}} onChangeText={text=>this.setState({nowtext:text})} placeholder="实时同步value" />
        <Text>{nowtext}</Text>
        <Image source={require('./img/favicon.png')} style={{width: 193, height: 110}} />
        <Button
          onPress={() => navigate('Chat')}
          title="跳转到form2"
        />
        <ChatScreen title="from Form2" />
        <TouchableOpacity style={{backgroundColor:"#f00",padding:10,marginTop:10,borderRadius:10}} onPress={this._onPressButton}>
        <Text style={{color:"#fff",fontWeight:"bold"}}>Button</Text>
      </TouchableOpacity>
        <View style={{flex:1,height:100,flexDirection:"row"}}>
          <View style={{flex:1,backgroundColor:"red"}}><Text style={{color:"#fff",textAlign:"center"}}>123</Text></View>
          <View style={{flex:1,backgroundColor:"blue"}}><Text style={{color:"#fff",textAlign:"center"}}>456</Text></View>
        </View>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});


AppRegistry.registerComponent('AwesomeProject',()=> SimpleApp );